<template>
	<div class="scope">
		<ul class="bg-bubbles">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<div class="bg-bubbles-img"></div>
		</ul>

		<div class="tmp2">
			<el-form
				ref="form"
				class="form"
				label-width="0px"
				:label-position="'right'"
				size="small"
				:disabled="saving"
			>
				<div class="admin-logo">
					<div class="logo-icon">
						<icon-svg class="z" name="icon-logo"></icon-svg>
					</div>
					<div :class="[type === 'channel' ? 'admin-name2' : 'admin-name']">
						{{ type === 'channel' ? '欢迎使用查询系统' : '欢迎使用翼省钱'}}
					</div>
				</div>
				<el-form-item label="">
					<el-input
						placeholder="请输入用户名"
						v-model="form.username"
						maxlength="20"
						@keyup.enter.native="next"
						auto-complete="off"
					></el-input>
				</el-form-item>

				<el-form-item label="">
					<el-input
						type="password"
						placeholder="请输入密码"
						v-model="form.password"
						maxlength="20"
						auto-complete="off"
						@keyup.enter.native="next"
					></el-input>
				</el-form-item>

				<el-form-item label="" class="captcha" v-show="capisshow">
					<el-input
						placeholder="请输入图片验证码"
						maxlength="4"
						v-model="form.verifyCode"
						auto-complete="off"
						@keyup.enter.native="next"
					></el-input>

					<captcha
						ref="captcha"
						class="value"
						v-model="form.captchaId"
						@change="captchaChange"
					></captcha>
				</el-form-item>

				<el-button class="submit-btn" @click="next" :saving="saving">登录</el-button>
			</el-form>
		</div>
	</div>
</template>

<script>
import { isPc } from '@/cool/utils/index';
import index from './index';

export default {
	mixins: [index],
	data() {
		return {
			type: this.$route.query.type
		}
	},
	created() {
		if (!isPc()) {
			this.$router.push('/login-h5');
		}		
	}
};
</script>

<style lang="stylus" scoped>
.scope {
	height: 100vh;
	width: 100vw;
	position: relative;

	.tmp2 {
		width:1246px;
		height:722px;
		border-radius: 10px;
		overflow: hidden;
		position: absolute;
		left: calc(50% - 623px);
		top: calc(50% - 361px);
		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
		background-color #ffffff
		&:before {
			content: '';
			background-image: url('../../assets/images/Illustration.png');
			background-size: 100% 100%;
			position: absolute;
			top: 135px;
			left: 76px;
			height: 457.75px;
			width: 588.51px;
			z-index: 1;
		}

		&:after {
			content: '';
			// background: linear-gradient(to right, $color, $color2);
			position: absolute;
			left: 0px;
			right: 0;
			height: 383px;
			width: 767px;
			z-index: 0;
		}
		.admin-logo {
			height: 164px;
			display: flex;
			align-items: flex-start;
			justify-content: center;
			flex-direction: column;
			letter-spacing: 1px;
			.logo-icon {
				height: 72px;
				width: 52px;
				color #F1482C
			}
			.z {
				height: 72px;
				width: 52px;
				color #F1482C
			}
			.admin-name {
				font-weight:bold;
				font-size 20px
				color #F1482C
				margin-top 10px
			}
			.admin-name2 {
				font-weight:bold;
				font-size 20px
				color #000
				margin-top 10px
			}
		}

		.el-form {
			height: 280px;
			width:402px;
			border-radius: 3px;
			position: absolute;
			right: 83px;
			top: 165px;
			z-index: 1;
			.el-form-item {
				margin-bottom: 5px;
			}

			>>>.el-input {
				.el-input__inner {
					border: 0;
					box-shadow: 0 0 0px 1000px #fefcfe inset;
					border-radius: 0;
					padding: 0 5px;
					font-size 16px
					height:48px;
				}
			}

			.captcha {
				position: relative;

				.value {
					position: absolute;
					bottom: 0;
					right: 0;
				}
			}

			.submit-btn {
				width: 100%;
				background:linear-gradient(180deg,rgba(241,84,44,1) 0%,rgba(247,106,17,1) 100%);
				color: #fff;
				font-size: 16px;
				height:48px;
				letter-spacing: 2px;
				cursor: pointer;
				margin-top: 20px;
			}
		}
	}

	.bg-bubbles {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background:linear-gradient(180deg,rgba(241,84,44,1) 0%,rgba(247,106,17,1) 100%);
		.bg-bubbles-img {
			background-image:url('../../assets/images/bg.png');
			background-size cover;
			background-repeat no-repeat
			width: 100%;
			height: 100%;
		}
	}

	.bg-bubbles li {
		position: absolute;
		bottom: -160px;
		width: 40px;
		height: 40px;
		background-color: rgba(255, 255, 255, 0.15);
		list-style: none;
		animation: square 15s infinite;
		transition-timing-function: linear;
		border-radius: 50%;
	}

	.bg-bubbles li:nth-child(1) {
		left: 10%;
	}

	.bg-bubbles li:nth-child(2) {
		left: 20%;
		width: 90px;
		height: 90px;
		animation-delay: 2s;
		animation-duration: 7s;
	}

	.bg-bubbles li:nth-child(3) {
		left: 25%;
		animation-delay: 4s;
	}

	.bg-bubbles li:nth-child(4) {
		left: 40%;
		width: 60px;
		height: 60px;
		animation-duration: 8s;
		background-color: rgba(255, 255, 255, 0.3);
	}

	.bg-bubbles li:nth-child(5) {
		left: 70%;
	}

	.bg-bubbles li:nth-child(6) {
		left: 80%;
		width: 120px;
		height: 120px;
		animation-delay: 3s;
		background-color: rgba(255, 255, 255, 0.2);
	}

	.bg-bubbles li:nth-child(7) {
		left: 32%;
		width: 160px;
		height: 160px;
		animation-delay: 2s;
	}

	.bg-bubbles li:nth-child(8) {
		left: 55%;
		width: 20px;
		height: 20px;
		animation-delay: 4s;
		animation-duration: 15s;
	}

	.bg-bubbles li:nth-child(9) {
		left: 25%;
		width: 10px;
		height: 10px;
		animation-delay: 2s;
		animation-duration: 12s;
		background-color: rgba(255, 255, 255, 0.3);
	}

	.bg-bubbles li:nth-child(10) {
		left: 85%;
		width: 160px;
		height: 160px;
		animation-delay: 5s;
	}

	@keyframes square {
		0% {
			opacity: 0.5;
			transform: translateY(0px) rotate(45deg);
		}

		25% {
			opacity: 0.75;
			transform: translateY(-400px) rotate(90deg);
		}

		50% {
			opacity: 1;
			transform: translateY(-600px) rotate(135deg);
		}

		100% {
			opacity: 0;
			transform: translateY(-1000px) rotate(180deg);
		}
	}
}
</style>
